<template>
  <div class="tags">
    <el-card>
      <div slot="header" class="clearfix" v-if="queryId">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{list && list[0] && list[0].subjectName}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 头部功能区域 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form>
            <el-row type="flex" justify="space-between">
              <el-col :span="9">
                <el-form-item label="目录名称" label-width="80px">
                  <el-input v-model="pageInfo.tagName" />
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="状态" label-width="80px">
                  <el-select
                    v-model="pageInfo.state"
                    placeholder="请选择"
                  >
                    <el-option label="启用" :value="1" />
                    <el-option label="禁用" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button @click="clearOptions">清除</el-button>
                  <el-button type="primary" @click="searchList">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              type="text"
              style="margin-right: 10px"
              @click="$router.push('/subjects/list')"
               v-if="queryId"
              >← 返回学科</el-button
            >
            <el-row type="flex" justify="end"> </el-row>
            <el-button icon="el-icon-edit" type="success" @click="addItem"
              >新增目录</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示区域 -->
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ counts }}条</span>
      </el-alert>
      <!-- 主体表格区域 -->
      <template>
        <el-table class="table" :data="list" style="width: 100%">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template v-slot="{ row }">
              <span>{{ row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template v-slot="{ row }">
              <span>{{ row.state | switchState }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button @click="changeState(row)" type="text">{{
                row.state === 0 ? "启用" : "禁用"
              }}</el-button>
              <el-button
                :disabled="row.state === 1"
                @click="editItem(row)"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="deleteItem(row)"
                :disabled="row.state === 1"
                type="text"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 底部分页区域 -->
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :total="counts"
          :current-page.sync="pageInfo.page"
          layout="prev, pager, next, sizes, jumper"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 修改弹出层 -->
    <el-dialog
      :title="num === 1 ? '修改目录' : '新增目录'"
      :visible.sync="showDialog"
      width="30%"
      @close="resetForm"
    >
      <el-form :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="所属学科" label-width="80px" v-if="!queryId">
          <el-select
            v-model="formData.subjectID"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in subList"
              :key="index"
              :label="item.subjectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" label-width="80px" prop="tagName">
          <el-input placeholder="请输入目录名称" v-model="formData.tagName" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="btnOK"
            >确 定</el-button
          >
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// update
import { list, remove, changeState, add, update } from '../../api/hmmm/tags.js'
import { list as subjectsList } from '../../api/hmmm/subjects.js'
import { status } from '../../api/hmmm/constants.js'
export default {
  name: 'Tags',
  data () {
    return {
      // 查询参数
      pageInfo: {
        page: 1,
        pagesize: 10,
        tagName: '',
        state: null
      },
      // 标签列表
      list: [],
      counts: 0,
      showDialog: false,
      // 共用依据
      num: null,
      // 弹窗查询数据
      formData: {
        subjectName: '',
        tagName: '',
        subjectID: ''
      },
      // 验证规则
      rules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 学科列表
      subList: [],
      // 当前数据id
      itemId: null,
      // 查询参数id
      queryId: null,
      // TODO
      value: ''
    }
  },
  filters: {
    switchState (value) {
      const f = status.find(t => t.value === value)
      return f ? f.label : ''
    }
  },
  created () {
    this.getQueryId()
    this.judgeGetList()
  },
  methods: {
    // 根据查询参数Id 判断获取列表的方式
    async judgeGetList () {
      if (this.queryId) {
        // 带查询参数过来
        const { data, data: { items } } = await list({
          ...this.pageInfo,
          subjectID: this.queryId
        })
        this.counts = data.counts
        this.list = items
      } else {
        // 不带查询参数过来
        const { data, data: { items } } = await list(this.pageInfo)
        this.counts = data.counts
        this.list = items
      }
    },
    // 获取查询参数Id / 渲染列表
    async getQueryId () {
      if (this.$route.query.id) {
        this.queryId = this.$route.query.id
        this.formData.subjectID = this.$route.query.id
        // 获取筛选后的列表
        this.judgeGetList()
      } else {
        this.queryId = null
        this.formData.subjectID = null
      }
    },
    // 分页选择每页条数
    handleSizeChange (val) {
      this.pageInfo.pagesize = val
      if (this.pageInfo.page === 1) {
        this.judgeGetList(this.pageInfo)
      }
    },
    handleCurrentChange (val) {
      this.pageInfo.page = val
      this.judgeGetList()
    },
    // 搜索
    searchList () {
      this.pageInfo.page = 1
      this.judgeGetList()
    },
    // 删除
    async deleteItem (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async val => {
          await remove(row)
          this.judgeGetList()
          this.$message.success('删除成功')
        })
        .catch(() => {})
    },
    // 修改状态
    async changeState (row) {
      await changeState({
        id: row.id,
        state: row.state === 0 ? 1 : 0
      })
      this.judgeGetList()
    },
    // 修改当前数据
    async editItem (row) {
      this.num = 1
      const { data: { items } } = await subjectsList({ page: 1, pagesize: 100 })
      this.subList = items
      this.showDialog = true
      this.formData = {
        subjectName: row.subjectName,
        tagName: row.tagName,
        subjectID: row.subjectID
      }
      this.itemId = row.id
    },
    // 新增
    async addItem () {
      this.num = 2
      this.showDialog = true
      const { data: { items } } = await subjectsList({ page: 1, pagesize: 100 })
      this.subList = items
    },
    // 清除内容
    clearOptions () {
      this.pageInfo.tagName = ''
      this.pageInfo.state = null
      this.judgeGetList()
    },
    // 点击新增及编辑操作
    btnOK () {
      this.$refs.formRef.validate(async (isOk) => {
        if (isOk) {
          if (this.num === 1) {
            await update({ ...this.formData, id: this.itemId })
            this.$message.success('修改标签成功')
          } else {
            await add({ subjectID: Number(this.formData.subjectID), tagName: this.formData.tagName })
            this.$message.success('新增标签成功')
          }
          this.judgeGetList()
          this.showDialog = false
        }
        this.num = null
      })
    },
    // 清空验证及数据
    resetForm () {
      this.formData = {
        tagName: '',
        subjectID: ''
      }
      this.$refs.formRef.resetFields()
      this.formData.subjectID = this.$route.query.id ? this.$route.query.id : ''
    }
  },
  components: {

  }
}
</script>

<style scoped lang='less'>
.table {
  margin: 10px 0 20px 0;
}
</style>
